<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React的列表</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
   <div id = 'example'></div>
   <script type="text/babel">

       //定义组件
       class NumberList extends  React.Component{
           render(){
               const  numbers =  this.props.numbers;
               //遍历组件JSX 允许在大括号中嵌入任何表达式
               const  listItem = numbers.map(
                   (number) =>
                       <li key={number.toString()}>
                           {number}
                       </li>
               );
               return(
                   <ul>{listItem}</ul>
               );
           }
       }

       const numbers = [1,2,3,4,5];
      //渲染
      ReactDOM.render(
         <NumberList numbers = {numbers}/>,
          document.getElementById('example')

      );
   </script>



</body>
</html>